<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="background-color: #f2f2f2;">
      <el-row >
        <el-col :span="6" style="text-align: center; margin-top: 20px;">
          <el-form-item prop="orderCode" >
            <el-select v-model="queryParams.mechanismName"
                       placeholder="请输入机构名称"
                       clearable>
              <el-option
                v-for="item in mechanismList"
                :key="item.id"
                :label="item.mechanism_name"
                :value="item.mechanism_name">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: center;margin-top: 20px;">
          <el-form-item prop="sellerId">
            <el-select v-model="queryParams.warehouserCode"
                       placeholder="请输入仓库编号"
                       clearable>
              <el-option
                v-for="item in warehouseList"
                :key="item.warehouse_code"
                :label="item.warehouse_name"
                :value="item.warehouse_code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6"  style="text-align: center;margin-top: 20px;">
          <el-form-item prop="deliveryFee">
            <el-input
              v-model="queryParams.businessName"
              placeholder="请输入商家名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: center;margin-top: 20px;">
          <el-form-item prop="amount">
            <el-input
              v-model="queryParams.goodsName"
              placeholder="请输入商品名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" style="text-align: center;">
          <el-form-item>
            <template>
              <div style="font-weight: 600; display: inline-block;">
                时间：
              </div>
              <el-radio v-model="queryParams.radio" :label="1">按年</el-radio>
              <el-radio v-model="queryParams.radio" :label="2">按月</el-radio>
              <el-radio v-model="queryParams.radio" :label="3">按日</el-radio>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: center;">
          <el-form-item prop="payTime">
            <el-date-picker clearable
                            v-model="queryParams.startDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: center;">
          <el-form-item prop="payTime">
            <el-date-picker clearable
                            v-model="queryParams.endDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align: center;">
          <el-form-item>
            <el-button type="primary" icon="el-icon-s-data" size="mini" @click="handleQuery">开始统计</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--    统计图div-->
    <div id="main" style=" width: 1200px; height: 615px; margin: 0 auto;"></div>
  </div>
</template>

<script>
import { getCountList,getMechanismName,getWarehouseName} from "@/api/work/inorderlist";
export default {
  name: "Inorderlist",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单采购统计表格数据
      inorderlistList: [],
      // 查询参数
      queryParams: {
        mechanismName:null,
        warehouserCode: null,
        businessName: null,
        goodsName: null,
        startDate: null,
        endDate: null,
        radio: 3,
      },
      // 表单参数
      form: {},
      mechanismList: [],
      warehouseList: [],
      totalMoney: null,
      xAxis: [],
      totalNumber1: [],
      totalNumber2: [],
      length : null,
      style: 'yyyy-MM-dd',
    };
  },
  created() {
    this.getMechanismList();
    this.getWarehouseName();
  },
  mounted () {
    let chartDom = document.getElementById('main');
    let myChart = this.$echarts.init(chartDom);
    let option = {
      title: {
        text: 'Order Statistics',
        subtext: '总金额：0.00',
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['采购中', '已完成']
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          data: this.xAxis,
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '采购中',
          type: 'bar',
          data: this.totalNumber1,
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        },
        {
          name: '已完成',
          type: 'bar',
          data: this.totalNumber2,
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        }
      ]
    };
    this.$watch('totalMoney',function (newVal) {option.title.subtext = '总金额：'+ newVal; myChart.setOption(option);});
    this.$watch('length',function (newVal) {
      console.log('响应数据长度：'+newVal); myChart.setOption(option);});
    // this.$watch('xAxis',(newVal,oldVal)=>{
    //   console.log('hello',newVal);
    //   myChart.setOption(option);
    // },{deep:true,immediate:true})
  },
  methods: {
    // 获取仓库名称
    getWarehouseName() {
      getWarehouseName().then(response => {
        this.warehouseList = response.data;
      })
    },
    // 获取机构名称列表
    getMechanismList() {
      getMechanismName().then(response => {
        this.mechanismList = response.rows;
      })
    },
    /** 查询订单采购统计列表----采购中 */
    getList() {
      this.totalMoney = 0;
      this.length = 0;
      this.loading = true;
      getCountList(this.queryParams).then(response => {
        console.log(response.data);
        let len = response.data.length;
        for (let i = 0; i < len; i++) {
          this.xAxis[i] = response.data[i].date;
          this.totalNumber1[i] = response.data[i].sumNum1;
          this.totalNumber2[i] = response.data[i].sumNum2;
          this.totalMoney = response.data[len-1].totalPrice;
          this.length = len;
          this.xAxis.splice(len,this.xAxis.length-len);
          this.totalNumber1.splice(len,this.totalNumber1.length-len);
          this.totalNumber2.splice(len,this.totalNumber2.length-len);
        }
        console.log('1----'+this.xAxis);
        console.log('2----'+this.totalNumber1);
        console.log('3----'+this.totalNumber2);
        console.log('4----'+this.totalMoney);
        this.loading = false;
      });
      /** 查询订单采购统计列表----已完成 */
    },
    // 表单重置
    reset() {
      this.form = {
        mechanismName: null,
        warehouserCode: null,
        businessName: null,
        goodsName: null,
        startDate: null,
        endDate: null,
        radio: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        mechanismName:null,
        warehouserCode: null,
        businessName: null,
        goodsName: null,
        startDate: null,
        endDate: null,
        radio: null,
      },
      this.resetForm("queryParams");
    },
  }
};
</script>
